<template>
	<view class="uni-px-4">
		<uni-easyinput class="uni-my-4" v-model="phone" placeholder="請輸入新手機號"></uni-easyinput>
		<view class="flex items-center justify-between uni-my-4">
			<uni-easyinput class="uni-mr-4" type="number" v-model="phoneCode" placeholder="請輸入手機驗證碼"></uni-easyinput>
			<button type="primary" size="mini">發送驗證碼</button>
		</view>
		<button @click="changePhone">完成</button>
	</view>
</template>

<script>
import {
	httpUserEditPhone
} from '@/utils/api.js'
export default {
	data() {
		return {
			phone: '',
			userId: '',
			phoneCode: ''
		}
	},
	onLoad() {
		const user = getApp().globalData.user
		this.userId = user.userId || user.id
	},
	methods: {
		async changePhone() {
			if (this.phone === '') {
				uni.showToast({
					title: '輸入不能爲空',
					icon: 'none'
				})
				return false
			}
			const { code, message } = await httpUserEditPhone(this.userId, this.phone)
			if (code === 200) {
				uni.showToast({
					title: '更改成功',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: message,
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style></style>